<template>
  <div class="pageSet">
    <div class="setBox">
      <p class="title">banner图设置</p>
      <img v-if="bannerUrl" :src="bannerUrl" class="avatar">
      <div class="el-icon-plus avatar-uploader-icon" v-on:click="uploadImage()">
      </div>
      <div class="btn">
        <el-button type="primary" size="mini" :disabled="bannerUrl==''||bannerUrl===null" v-on:click="setBanner()">确定</el-button>
      </div>
    </div>
    <div class="setBox">
      <p class="title">门票说明</p>
      <WangEditor ref="editor1" mark="Editor1" :content="ticketDescription"></WangEditor>
      <div class="btn">
        <el-button type="primary" size="mini" v-on:click="setTicketDescription()">确定</el-button>
      </div>
    </div>
    <div class="setBox">
      <p class="title">团购票数量说明</p>
      <WangEditor ref="editor2" mark="Editor2" :content="groupTicketNumDescription"></WangEditor>
      <div class="btn">
        <el-button type="primary" size="mini" v-on:click="setGroupTicketNumDescription()">确定</el-button>
      </div>
    </div>
    <div class="setBox">
      <p class="title">退改签须知内容</p>
      <WangEditor ref="editor3" mark="Editor3" :content="resignationChangeNoticeContent"></WangEditor>
      <div class="btn">
        <el-button type="primary" size="mini" v-on:click="setResignationChangeNoticeContent()">确定</el-button>
      </div>
    </div>
    <!-- <div class="setBox">
      <p class="title">购票字体颜色主题</p>
      <el-color-picker v-model="themeConfiguration.themeColor"></el-color-picker>
      <div class="btn">
        <el-button type="primary" @click="setThemeConfigurationByCorpId('themeColor')" size="mini">确定</el-button>
      </div>
    </div> -->
    <!-- <div class="setBox">
      <p class="title">购票按钮颜色主题</p>
      <el-color-picker v-model="themeConfiguration.btntTemeColor"></el-color-picker>
      <div class="btn">
        <el-button type="primary" @click="setThemeConfigurationByCorpId('btntTemeColor')" size="mini">确定</el-button>
      </div>
    </div> -->
    <!-- <div class="setBox">
      <p class="title">客服电话</p>
      <el-input placeholder="请输入" maxlength="11" v-model="customerServiceTel"></el-input>
      <div class="btn">
        <el-button type="primary" :disabled="customerServiceTel==''" v-on:click="setCustomerServiceTel()">确定</el-button>
      </div>
    </div> -->
  </div>
</template>
<script>
import WangEditor from "./../wangEditor/index"; // 引入富文本编辑模块
import elementUIFun from "@/js/elementUIFun";
import service from "@/api/order.js";
export default {
  components: { WangEditor },
  data() {
    return {
      themeConfiguration: {
        themeColor: "#5D97Ff", //字体主题色
        btntTemeColor: "#6044d4", //按钮主题色
        backgroundImg: "" //背景图
      },
      activityId: this.$store.state.activityId,
      bannerUrl: this.$store.state.bannerUrl, //banner
      ticketDescription: this.$store.state.ticketDescription, //,设置门票说明
      groupTicketNumDescription: this.$store.state.groupTicketNumDescription, //设置团购票数量说明
      resignationChangeNoticeContent: this.$store.state
        .resignationChangeNoticeContent, //设置退改签须知
      customerServiceTel: this.$store.state.customerServiceTel //客服电话
    };
  },
  computed: {
    thisActivityId() {
      return this.$store.state.activityId;
    }
  },
  watch: {
    thisActivityId(newValue) {
      this.activityId = newValue;
      console.log("修改前为：" + newValue);
    }
  },
  created() {
    // this.queryThemeConfigurationByCorpId();
  },
  methods: {
    // 查询主题配置
    async queryThemeConfigurationByCorpId() {
      const { data = "" } = await service.queryThemeConfigurationByCorpId({
        corpId: localStorage.getItem("corpId")
      });
      console.log("主题色", data);
      if (!data) {
        return;
      }
      const themeConfiguration = JSON.parse(data);
      if (themeConfiguration.themeColor) {
        this.themeConfiguration.themeColor = themeConfiguration.themeColor;
      }
      if (themeConfiguration.btntTemeColor) {
        this.themeConfiguration.btntTemeColor =
          themeConfiguration.btntTemeColor;
      }
    },
    // 设置主题配置
    async setThemeConfigurationByCorpId(who) {
      const confirm = await elementUIFun.$confirm(
        who == "themeColor"
          ? "您确定更改购票字体颜色主题么？"
          : "您确定更改购票按钮颜色主题么?"
      );
      if (!confirm) {
        return;
      }
      let themeConfiguration = {
        themeColor: this.themeConfiguration.themeColor,
        btntTemeColor: this.themeConfiguration.btntTemeColor
      };
      const { success } = await service.setThemeConfigurationByCorpId({
        themeConfiguration: JSON.stringify(themeConfiguration)
      });
      if (success) {
        this.$message({
          message: "更改成功",
          type: "success"
        });
        this.queryThemeConfigurationByCorpId();
      }
    },
    //设置banner
    setBanner: function() {
      let t = this;
      this.$http
        .post("/api/isv/activity/setBannerUrl", {
          bannerUrl: this.bannerUrl,
          activityId: this.activityId
        })
        .then(
          res => {
            if (res.data.success) {
              t.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              t.$message({
                message: res.data.errorMsg,
                type: "error"
              });
            }
          },
          error => {
            t.$message({
              message: "网络异常",
              type: "warning"
            });
          }
        );
    },
    //设置门票说明
    setTicketDescription: function() {
      let t = this;
      this.ticketDescription = this.$refs.editor1.getContent();
      if (!t.ticketDescription) {
        t.$message({
          message: "内容不能为空",
          type: "warning"
        });
        return;
      }
      this.$http
        .post("/api/isv/activity/setTicketDescription", {
          ticketDescription: this.ticketDescription,
          activityId: this.activityId
        })
        .then(
          res => {
            if (res.data.success) {
              t.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              t.$message({
                message: res.data.errorMsg,
                type: "error"
              });
            }
          },
          error => {
            t.$message({
              message: "网络异常",
              type: "warning"
            });
          }
        );
    },
    //设置团购票数量说明
    setGroupTicketNumDescription: function() {
      let t = this;
      this.groupTicketNumDescription = this.$refs.editor2.getContent();
      if (!t.groupTicketNumDescription) {
        t.$message({
          message: "内容不能为空",
          type: "warning"
        });
        return;
      }
      this.$http
        .post("/api/isv/activity/setGroupTicketNumDescription", {
          activityId: this.activityId,
          groupTicketNumDescription: this.groupTicketNumDescription
        })
        .then(
          res => {
            if (res.data.success) {
              t.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              t.$message({
                message: res.data.errorMsg,
                type: "error"
              });
            }
          },
          error => {
            t.$message({
              message: "网络异常",
              type: "warning"
            });
          }
        );
    },
    //设置退改签须知
    setResignationChangeNoticeContent: function() {
      let t = this;

      this.resignationChangeNoticeContent = this.$refs.editor3.getContent();
      if (!t.resignationChangeNoticeContent) {
        t.$message({
          message: "内容不能为空",
          type: "warning"
        });
        return;
      }
      this.$http
        .post("/api/isv/activity/setResignationChangeNoticeContent", {
          activityId: this.activityId,
          resignationChangeNoticeContent: this.resignationChangeNoticeContent
        })
        .then(
          res => {
            if (res.data.success) {
              t.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              t.$message({
                message: res.data.errorMsg,
                type: "error"
              });
            }
          },
          error => {
            t.$message({
              message: "网络异常",
              type: "warning"
            });
          }
        );
    },
    //设置客服电话
    setCustomerServiceTel: function() {
      let t = this;
      this.$http
        .post("/api/isv/activity/setCustomerServiceTel", {
          activityId: this.activityId,
          customerServiceTel: this.customerServiceTel
        })
        .then(
          res => {
            if (res.data.success) {
              t.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              t.$message({
                message: res.data.errorMsg,
                type: "error"
              });
            }
          },
          error => {
            t.$message({
              message: "网络异常",
              type: "warning"
            });
          }
        );
    },
    //上传图片
    uploadImage: function() {
      let t = this;
      DingTalkPC.biz.util.uploadImage({
        multiple: false, //是否多选，默认false
        max: 1, //最多可选个数
        onSuccess: function(result) {
          console.log(result);
          let img = new Image();
          img.src = result[0];
          t.bannerUrl = result[0];
          img.onload = function() {
            if (img.width != 750 || img.height != 370) {
              t.$message({
                message: "建议上传的图片规格750*370",
                type: "warning"
              });
            }
          };
        },
        onFail: function(err) {}
      });
    }
  },

  mounted() {
    console.log(this.ticketDescription, "rrr");
    this.$refs.editor1.setContent(this.$store.state.ticketDescription);
    this.$refs.editor2.setContent(this.$store.state.groupTicketNumDescription);
    this.$refs.editor3.setContent(
      this.$store.state.resignationChangeNoticeContent
    );
  }
};
</script>

<style scoped>
.setBox {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 0 26px 26px;
  margin-bottom: 10px;
}
.title {
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e4e4e4;
}
.picture {
  display: inline-block;
}
.avatar-uploader-icon {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 178px;
  vertical-align: top;
  display: inline-block;
  margin-right: 10px;
}
.btn {
  margin-top: 10px;
}
</style>
